{extend name="public/base"}

{block name="title"}就行天下-首页{/block}

{block name="style"}
<link rel="stylesheet" href="__STATIC__/home/css/index.css" />
{/block}

{block name="main"}
<div class="pageControl neerShop bg-f7">
    <div class="main-top"></div>
    <div class="msui_nav msui_navTop">
        <a class="msui_navTop-back" href="{:url('index', ['lat' => $lat, 'lng' => $lng])}"><i class="micon-back"></i></a>
        <h1 class="msui_navTop-title">附近店铺</h1>
        <a href="" class="msui_navTop-right msui_navTop-cnav"><i class="micon-cnav"></i></a>
    </div>
    <div class="neerShop-total">
        {empty name="data"}
            <p style="text-align: center; margin-top: 4rem"> 附近没有找到店铺。。。</p>
        {else /}
            {volist name="data" id="vo"}
            <a href="{:url('product/index', [ 'shop_id' => $vo['id']])}" class="weui-cell ftAbsolute_bt" data-lat="{$vo.lat}" data-lng="{$vo.lng}">
                <div class="weui-cell__hd neerShopImg">
                    <img src="{$vo.logo}" alt="">
                </div>
                <div class="weui-cell__bd">
                    <p class="fs07">{$vo.name}</p>
                    <div class="storeDetail-xx">
                        <p class="xx">
                            <!--满星星加class为 active-->
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                        </p>
                        <!--填写显示星星分数，即可显示几颗星星-->
                        <span style="display: none" class="fs06 cl-ff9 exclusive-count">{$vo.level}分</span>
                    </div>
                    <div class="fs065 mtop01">{$vo.order_num}人下单</div>
                </div>
                <div class="weui-cell__ft">
                    <p class="cl-3333 fs06">
                        距离<span class="distance">0</span>米
                    </p>
                </div>
            </a>
            {/volist}
        {/empty}
    </div>
    <div class="neerShop-bottom">
        <p class="neerShop-address fs06">
            <i class="icon iconfont icon-location fs10 cl-c40"></i>
            当前位置: <span>{$Think.get.ad}</span>
        </p>
    </div>
</div>
{/block}

{block name="javascript"}
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=79d3994d99486314dbfddc26b4445dd2&plugin=AMap.ToolBar"></script>
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.10"></script>
<script>
    $(function () {
//        星星显示
        $('.xx').each(function () {
            var exclusiveCount=parseInt($(this).next().html()) ;
            for(var i=1;i<=exclusiveCount;i++) {
                $(this).find('span').eq(i-1).addClass('active');

            }
        });

        /**
         * 循环店铺计算距离
         */
        $(".ftAbsolute_bt").each(function () {

            var lnglat = new AMap.LngLat({$Think.get.lng}, {$Think.get.lat});
            var distance = lnglat.distance([$(this).data('lng'), $(this).data('lat')]);
            $(this).find('.distance').text(parseInt(distance));
        });
    })
</script>
{/block}